<template>
  <div id="app">
    <div class="title">
    选择曲目
      <select name="" id="" v-model="selectedq" @change="">
        <option v-for="(q,index) in qumu" :key="index" v-bind:value="q.value">{{ q.name }}</option>
      </select>
      </div>
      <div>
        <div v-if="selectedq =='tdb'">
          <cycle :val="va" :key="va" :ci="index+'-tdb'" v-for="(va,index) in tdb" ></cycle>
        </div>
        <div v-if="selectedq =='tdb2'">
          <cycle :val="va" :key="va" :ci="index+'-tdb2'" v-for="(va,index) in tdb2" ></cycle>
        </div>
      </div>
  </div>
</template>

<script>

import cycle from './components/cycle.vue'

export default {
  name: 'App',
  components: {
    cycle
  },
  created(){
    // this.setval()
  },
  data(){
    return {
      qumu:[
        {
          name: '投弹兵1',value:'tdb'
        },
        {
          name: '投弹兵2',value:'tdb2'
        },
      ],
      selectedq:'tdb2',
      musicval: 1,
      tdb:[5,1,5,1,2,3,2,3,1,5,1,3,2,1,7,1,
            5,1,5,1,2,3,2,3,1,5,1,3,2,1,7,1,
            3,4,5,6,5,4,3,4,5,1,1,2,3,4,3,2,
            5,1,5,1,2,3,2,3,4,5,1,3,2,1,7,1,
            5,1,5,1,2,3,2,3,1,5,1,3,2,1,7,1,
            5,1,5,1,2,3,2,3,1,5,1,3,2,1,7,1,
            3,4,5,6,5,4,3,4,5,1,1,2,3,4,3,2,
            5,1,5,1,2,3,2,3,4,5,1,3,2,1,7,1,
            3,4,5,6,5,4,3,4,5,1,1,2,3,4,3,2,
            5,1,5,1,2,3,2,3,4,5,1,3,2,1,7,1,],
    tdb2:[5,1,5,1,2,3,4,3,2, ,2,3,1,5,1, ,3,2,1,7,1,
          5,1,5,1,2,3,4,3,2, ,2,3,1,5,1, ,3,2,1,7,1,
          6,5,6,5,4,3,4,5,1, ,6,6,5,4,2,3,1,7,
          5,1, ,7,1,2, ,1,2,3, ,2,3,4, ,3,4,5,1, ,3,2,1,7,1,
          6,5,6,5,4,3,4,5,1, ,6,6,5,4,2,3,1,7,
          5,1, ,7,1,2, ,1,2,3, ,2,3,4, ,3,4,5,1, ,3,2,1,7,1]
    }
  },
  methods:{
    changev(){

    },
    setval(){
      var _this = this
      setTimeout(()=>{
        _this.musicval +=1;
        if(_this.musicval>7){
          _this.musicval = 1;
        }
        _this.setval()
      },1000)
    }
  }
  
}
</script>

<style>
.title{
  width: 100%;
  height: 32px;
  float: left;
}
</style>
